import React from 'react';
import styles from './index.less';
import { Card, List, Badge, Radio } from 'antd';

const options = [
  { label: '读者', value: 0 },
  { label: '书籍', value: 1 },
];


class News extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      radioValue: 0
    }
  }

  getStatusBadge = (status) => {
    let color = '';
    switch (status) {
      case 1:
        color = '#ec5b56';
        break;
      case 2:
        color = '#f0af41';
        break;
      case 3:
        color = '#72c040';
        break;
      default:
        color = '#3f90f7';
        break;
    }
    return <Badge style={{ backgroundColor: color, marginRight: 5 }} count={status} />;
  }

  onChange = (e) => {
    this.setState({
      radioValue: e.target.value,
    });
  }

  render() {
    const {radioValue} = this.state;
    const {book, reader} = this.props;
    const list = radioValue === 0 ? reader : book;
    return (
      <Card
        style={{ marginBottom: 16 }}
        title="借阅排行榜"
        bordered={false}
        extra={
          <Radio.Group
            defaultValue={radioValue}
            options={options}
            onChange={this.onChange}
            value={radioValue}
            optionType="button"/>
        }
        bodyStyle={{height: 225, padding: 0 }} >
        <List
          className={styles.rightRank}
          itemLayout="horizontal"
          dataSource={list}
          renderItem={(item) => (
            <List.Item className={styles.item}>
              {this.getStatusBadge(item.status)}
              <span>{item.name}</span>
            </List.Item>
          )}
        />
      </Card>
    );
  }
}

export default News;
